import styled from 'styled-components'

export const AlbumCoverWrapper = styled.div`
  width: ${props => props.width + "px"};

  .album-image {
    margin-top: 15px;
    position: relative;
    width: ${props => props.width + "px"};
    height: ${props => props.size + "px"};
    overflow: hidden;

    img {
      width: ${props => props.size + "px"};
      height: ${props => props.size + "px"};
    }

    .cover {
      background-position: 0 ${props => props.bgp};
    }
  }

  .album-info {
    font-size: 12px;
    width: ${props => props.size + "px"};

    .name {
      color: #000;
 
      &:hover {
        text-decoration: underline;
      }
    }
    
    .artist {
      color: #666;

      &:hover {
        text-decoration: underline;
      }
    }
  }
`